<template>

  <div> 
    <div class="params">
        <el-button type="primary" class="el-icon-plus" @click="openAdd()">添加</el-button>
    </div>
    <el-table :data="listData" border highlight-current-row stripe style="width: 100%;margin-top: 20px">
      <el-table-column prop="aId" label="活动id"></el-table-column>
      <el-table-column prop="title" label="活动标题"></el-table-column>
      <el-table-column prop="smallImgSrc" label="活动小图">
        <template slot-scope="scope">
            <img :src="scope.row.smallImgSrc" style="margin-left: 20px;max-height: 120px;max-width: 120px">
        </template>
      </el-table-column>
      <el-table-column prop="bgImgSrc" label="活动背景图">
          <template slot-scope="scope">
            <img :src="scope.row.bgImgSrc" style="margin-left: 20px;max-height: 120px;max-width: 120px">
        </template>
      </el-table-column>
      <el-table-column prop="type" label="活动类型">
          <template slot-scope="scope">
              <span>{{activityTypeMap[scope.row.type]}}</span>
          </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="modifyActivity(scope.row)">修改</el-button>
          <br>
          <el-button type="text" size="small" @click="deleteActivity(scope.row.aId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--修改广告图-->
    <el-dialog type="text" :modal-append-to-body="false" :visible.sync="show" width="50%">
      <el-form>
          <el-form-item label="活动标题">
              <el-input v-model="activityTitle"></el-input>
          </el-form-item>
        <el-form-item label="活动小图">
          <lazy-img-upload @onSuccess="upOne"
                           beforeClass="afterUpload"
                           afterClass="afterUpload"
                           quality="50"
                           resize-width="1000"
                           :background-img="smallImgSrc === undefined? backImg:smallImgSrc">
          </lazy-img-upload>
        </el-form-item>
        <el-form-item label="活动背景图">
          <lazy-img-upload @onSuccess="upTwo"
                           beforeClass="afterUpload"
                           afterClass="afterUpload"
                           quality="50"
                           resize-width="1000"
                           :background-img="bgImgSrc === undefined? backImg:bgImgSrc">
          </lazy-img-upload>
        </el-form-item>
        <el-form-item label="活动类型">
            <el-select v-model="activityType">
                <el-option value="">请选择</el-option>
                <el-option v-for="(item, index) in activityTypeList" :key="index" :value="item.type" :label="item.text"></el-option>
            </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
         <el-button @click="show=false">取 消</el-button>
         <el-button type="primary" @click="doModAdvert">确 定</el-button>
       </span>
    </el-dialog>

  </div>

</template>

<script>
  import LazyImgUpload from "../../components/LazyImgUpload"
  import {ajax, getActivityList, setActivityItem, deleteActivityItem} from "../../data/service";

  export default {
    name: "goodsList",
    data() {
      return {
        listData: [],
        value: 1,
        timeRange: '',
        total: 0,
        page: 1,
        itemCode: '',
        title:'',
        modImg: false,
        advertId: '',
        imgData: [],
        itemId: '',
        show: false,
        backImg:require('../../assets/scImg1.png'),
        activityTypeMap: {
            0: '实时新品',
            1: '热销好货'
        },
        activityTypeList:[
            {type: '0', text: '实时新品'},
            {type: '1', text: '热销好货'}
        ],
        aId: '',
        activityTitle: '',
        smallImgSrc: '',
        bgImgSrc: '',
        activityType: ''
      }
    },
    created() {
      this.getList()
    },
    mixins: [ajax],
    methods: {

      getList() {
        this.doajax(getActivityList, {}, (resp) => {
          this.listData = resp.data;
        })
      },

      openAdd(){
          this.aId = ''
          this.activityTitle = ''
          this.smallImgSrc = ''
        this.bgImgSrc = ''
        this.activityType = ''
          this.show = true
      },

      deleteActivity(aId) {
        this.$confirm('确定删除吗?', '删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          this.doajax(deleteActivityItem, {aId: aId}, (resp) => {
            this.getList();
            this.success("删除成功")
          })
        }).catch(() => {

        });
      },
      
      modifyActivity(row) {
        this.aId = row.aId;
        this.activityTitle = row.title
        this.smallImgSrc = row.smallImgSrc
        this.bgImgSrc = row.bgImgSrc
        this.activityType = row.type
        this.show = true;
      },
      doModAdvert() {
        this.doajax(setActivityItem,
          {
            aId: this.aId,
            title: this.activityTitle,
            smallImgSrc: this.smallImgSrc,
            bgImgSrc: this.bgImgSrc,
            type: this.activityType
          },
          resp => {
            this.getList();
            this.show = false;
          });
      },
      upOne(val) {
        this.smallImgSrc = val;
      },
      upTwo(val) {
        this.bgImgSrc = val;
      }
    },
    components: {
      LazyImgUpload
    }
  }
</script>

<style>
  .ADModImg > .afterUpload > img {
    width: 100px;
    height: 100px;
    padding-left: 40%;
  }

  .afterUpload > img {
    width: 80px !important;
    height: 80px !important;
  }

  .el-select > .el-input {
    width: 150px;
    margin: 10px 0;
  }

  .el-select .el-input__inner {
    width: 150px;
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
  }
</style>
